<template>
  <div>
    <AnnLoading :loading="loading">
      <!-- Page content here -->
      <div class="article-detail">
        <!-- 文章图片 -->
        <section class="banner-container">
          <div class="banner-content">
            <img :src="articleInfo.articleImage" class="banner-image"/>
            <div
                class="article-header flex flex-col justify-center items-center text-gray-800"
            >
              <h1 class="title mb-4">{{ articleInfo.articleTitle }}</h1>
              <div class="flex">
                <div class="flex items-center">
                  <Icon name="iconamoon:category-thin"/>
                  <span class="mr-2 ml-2">{{ articleInfo.categoryName }}</span>
                </div>
                <div class="flex items-center ml-2">
                  <Icon name="iconoir:plug-type-l"/>
                  <span class="mr-2 ml-2">{{ articleInfo.articleType }}</span>
                </div>
                <div v-show="articleInfo.originalUrl" class="flex items-center ml-2">
                  <NuxtLink class="link link-success link-hover" :to="articleInfo.originalUrl">
                    <Icon name="icon-park-outline:link-two"/>
                    <span class="mr-2 ml-2">原文链接</span>
                  </NuxtLink>
                </div>
              </div>
              <div class="flex items-center mt-2">
                <Icon name="ph:tag"/>
                <div class="flex flex-wrap">
                <span
                    v-for="(tag, index) in articleInfo.tags"
                    :key="index"
                    class="ml-1"
                >{{ tag }}
                  <span v-if="index !== articleInfo.tags.length - 1">,</span>
                </span>
                </div>
              </div>
              <div class="flex items-center mt-2">
                <Icon name="iconamoon:clock-thin"/>
                <div class="flex flex-wrap">
                  <span class="mr-2 ml-2">{{ articleInfo.createTime }}</span>
                </div>
              </div>
              <!-- 作者等信息 -->
              <div class="stats lg:stats-horizontal shadow bg-opacity-40 backdrop-filter mt-6">
                <div class="stat">
                  <div class="stat-figure">
                    <Icon name="ph:eye-light" size="36" class="mr-1"/>
                  </div>
                  <div class="stat-title">Page Views</div>
                  <div class="stat-value">{{ articleInfo.viewedCount }}</div>
                </div>

                <div class="stat">
                  <div class="stat-figure">
                    <div class="avatar">
                      <div class="w-16 mask mask-squircle">
                        <img :src="articleInfo.avatar" alt="avatar"/>
                      </div>
                    </div>
                  </div>
                  <div class="stat-title">Author</div>
                  <div class="stat-value">{{ articleInfo.createBy }}</div>
                  <div class="stat-desc"></div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!--main内容 -->
        <section
            class="article-content flex justify-center item-center" ref="articleContent">
          <div id="md-preview" ref="leftContent" class="left-content p-8 w-[70%] flex justify-between">
            <!-- 主题按钮 -->
            <div class="dropdown dropdown-right">
              <div class="tooltip tooltip-info" data-tip="点击切换主题">
                <label tabindex="0" class="btn m-1 btn-primary">{{ mdState.previewTheme }}</label>
              </div>
              <ul tabindex="0" class="dropdown-content menu menu-md p-2 z-[1] shadow bg-opacity-50 backdrop-filter
            backdrop-blur-lg bg-base-100 rounded-box w-52 absolute right-0">
                <li v-for="(theme, index) in previewThemes" :key="index">
                  <a @click="mdState.previewTheme = theme">{{ theme }}</a>
                </li>
              </ul>
            </div>
            <MdPreview
                :editorId="mdState.id"
                :theme="mdState.theme"
                :previewTheme="mdState.previewTheme"
                :style="{ borderRadius: '10px', height: 'auto' }"
                :showCodeRowNumber="true"
                :modelValue="articleInfo.articleContent"/>
          </div>
          <div class="catalog-bar mt-6 w-[30%] z-20" :class="{ 'catalogFixedClass': catalogFixed }">
            <div class="stick-catalog">
              <p class="font-bold">目录</p>
              <MdCatalog
                  :editorId="mdState.id"
                  style="width: 400px"
                  :theme="mdState.theme"
                  :scrollElement="scrollElement"
                  :offsetTop="120"
                  :scrollElementOffsetTop="80"
              />
            </div>
          </div>
        </section>
        <AnnLikeComment :social-info="socialInfo"/>
      </div>
    </AnnLoading>

  </div>
</template>

<script setup lang="ts">
import {useThemeStore} from "~/store/theme";
import type {BlogArticleDetailWebVO} from "~/api/article/types";
import {MdCatalog, MdPreview} from "md-editor-v3";
import "md-editor-v3/lib/preview.css";
import type {SocialInfo} from "~/api/comment/types";
import {inBrowser} from "~/utils/nuxt/constants";
import {queryArticleDetail} from "~/api/article";

useHead({
  title: '文章详情',
  titleTemplate: title => `${title} - Annlcc's Blog`,
})
const themeStore = useThemeStore();
const route = useRoute();
//UI相关
const mdState = reactive({
  theme: computed(() => (themeStore.theme.dark ? "dark" : "light")),
  id: "my-editor",
  previewTheme: "default",
});
const loading = ref(true)

const scrollElement = ref<string | HTMLElement>("");
const articleContent = ref<HTMLElement>()
// 目录吸顶
let catalogFixed = ref<boolean>();
// Md相关：
// 主题列表
const previewThemes = ref([
  "default",
  "github",
  "mk-cute",
  "smart-blue",
  "cyanosis",
  "arknights",
]);

// 数据相关
const paramArticleId = ref(route.params.articleId as string);

const articleInfo = ref<BlogArticleDetailWebVO>({
  articleId: 1,
  articleTitle: "",
  articleImage: "",
  articleContent: "",
  articleType: "",
  originalUrl: "",
  categoryName: "",
  tags: [],
  createBy: "",
  authorId: "1",
  avatar: "",
  isLiked: false,
  viewedCount: 0,
  likedCount: 0,
  commentedCount: 0,
  blogCommentWebVoList: [],
  createTime: "",
});

const socialInfo = ref<SocialInfo>({
  authorId: 0,
  topicId: 0,
  isLiked: false,
  likedCount: 0,
  commentedCount: 0,
  commentList: [],
});

// const catalogs = ref<HeadList[]>([])

onBeforeMount(() => {
  if (inBrowser) {
    scrollElement.value = document.scrollingElement as HTMLElement;
    window.addEventListener("scroll", handleScroll);
  }
});
const handleScroll = () => {
  if (articleContent.value) {
    const top = articleContent.value.offsetTop - 20;
    catalogFixed.value = !!window.scrollY && window.scrollY > top;
  }
};
/*const handleGetCatalog = (list: any) => {
  catalogs.value = list.map((v: any) => {
    v.id = v.text
    return v
  })
}*/


// 查文章明细
const handleArticleDetail = async () => {
  loading.value = true;
  const {data: res} = await useAsyncData("queryArticleDetail", () =>
      queryArticleDetail(paramArticleId.value)
  );
  articleInfo.value = res.value as BlogArticleDetailWebVO;
  socialInfo.value = {
    authorId: articleInfo.value.authorId,
    topicId: paramArticleId.value,
    isLiked: articleInfo.value.isLiked,
    likedCount: articleInfo.value.likedCount,
    commentedCount: articleInfo.value.commentedCount,
    commentList: articleInfo.value.blogCommentWebVoList
  };
  loading.value = false;
};

handleArticleDetail();
</script>

<style lang="less" scoped>
.article-detail {
  min-height: 100vh;
}

.banner-container {
  height: 50vh;
  .banner-content {
    position: relative;
    height: 100%;

    .banner-image {
      width: 100%;
      height: 90%;
      filter: blur(28px) brightness(0.95);
      transform: scale(1.1);
      background-color: var(--nav-color);
    }
  }
}

.article-header {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);

  .title {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
  }
}

.catalogFixedClass {
  .stick-catalog {
    position: fixed;
    width: inherit;
    top: 66px;
  }
}

@media only screen and (max-width: 768px) {
  .title {
    margin-top: 150px;
  }

  .dropdown {
    display: none;
  }

  .scroll-to-top {
    display: none;
  }

  .left-content {
    width: 100%;
    margin-top: 50px;
  }

  .catalog-bar {
    display: none;
  }
}
</style>
